// scripts.js
// 确保DOM完全加载后再执行脚本
document.addEventListener('DOMContentLoaded', function() {
    // 获取DOM元素
    const pokemonNameInput = document.getElementById('pokemon-name'); // 宝可梦名称输入框
    const popup = document.getElementById('popup'); // 弹出窗口
    const overlay = document.getElementById('overlay'); // 遮罩层
    const confirmPopupButton = document.getElementById('confirm-popup'); // 弹出窗口中的确认按钮
    const closePopupButton = document.getElementById('close-popup'); // 弹出窗口中的关闭按钮
    const popupPokemonNameInput = document.getElementById('popup-pokemon-name'); // 弹出窗口中的宝可梦名称输入框

    // 显示弹出窗口
    pokemonNameInput.addEventListener('click', function() {
        // 如果宝可梦名称输入框为空，则显示弹出窗口和遮罩层
        if (pokemonNameInput.value === '') {
            popup.style.display = 'block'; // 显示弹出窗口
            overlay.style.display = 'block'; // 显示遮罩层
            popupPokemonNameInput.value = ''; // 清空弹出窗口中的输入框
        }
    });

    // 确认按钮点击事件
    confirmPopupButton.addEventListener('click', function() {
        // 获取弹出窗口中输入的宝可梦名称，并去除前后空格
        const newName = popupPokemonNameInput.value.trim();
        // 如果输入的名称不为空
        if (newName !== '') {
            pokemonNameInput.value = newName; // 将输入的名字设置到主页面的输入框
            popup.style.display = 'none'; // 隐藏弹出窗口
            overlay.style.display = 'none'; // 隐藏遮罩层
        } else {
            alert('请输入宝可梦的名字'); // 提示用户输入宝可梦的名字
        }
    });

    // 关闭按钮点击事件
    closePopupButton.addEventListener('click', function() {
        popup.style.display = 'none'; // 隐藏弹出窗口
        overlay.style.display = 'none'; // 隐藏遮罩层
    });

    // 点击遮罩层关闭弹出窗口
    overlay.addEventListener('click', function() {
        popup.style.display = 'none'; // 隐藏弹出窗口
        overlay.style.display = 'none'; // 隐藏遮罩层
    });
});

